<template>
  <div class="detailed">
    <a-row class="comm-main" type="flex" justify="center" :gutter="5">
      <a-col class="comm-left" :xs="20" :sm="14" :md="13" :lg="13" :xl="13">
        <a-card class="box-card" shadow="hover">
          <a-breadcrumb>
            <a-breadcrumb-item>首页</a-breadcrumb-item>
            <a-breadcrumb-item>{{artObj.typeName}}</a-breadcrumb-item>
            <a-breadcrumb-item>{{ artObj.title }}</a-breadcrumb-item>
          </a-breadcrumb>
          <div class="detailed-title">{{artObj.title}}</div>
          <div class="list-icon">
            <span>
              <a-icon type="calendar" />
              {{artObj.addTime}}
            </span>
            <span>
              <a-icon type="folder" />
              {{artObj.typeName}}
            </span>
            <span>
              <a-icon type="fire" />
              {{artObj.view_count}}
            </span>
          </div>
          <div class="detailed-content">
            <mavon-editor
              :transition="false"
              :value="value"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
              :codeStyle="codeStyle"
            />
          </div>
        </a-card>
      </a-col>
      <a-col class="comm-left" :xs="0" :sm="6" :md="5" :lg="5" :xl="5">
        <a-card class="box-card" shadow="hover">
          <Author />
        </a-card>
        <a-card class="box-card" shadow="hover">
          <Advert />
        </a-card>
        <a-affix :offset-top="100">
          <a-card>
            <a-anchor @click="handleClick">
              <a-anchor-link
                :href="'#_'+item.key"
                :title="item.value"
                v-for="(item, index) in titleArr"
                :key="index"
              />
            </a-anchor>
          </a-card>
        </a-affix>
      </a-col>
    </a-row>
    <Footer />
  </div>
</template>

<script>
import Author from "../Author/index";
import Advert from "../Advert/index";
import Footer from "../Footer/index";
export default {
  data() {
    return {
      value: "",
      titleArr: [],
      codeStyle: "monokai-sublime", //设置主题 ，
      artObj: {},
    };
  },
  mounted() {
    this.getArticleById();
  },
  methods: {
    //禁止右侧导航目录默认事件
    handleClick(e, link) {
      e.preventDefault();
    },
    async getArticleById() {
      let { data } = await this.$http.get(
        "/default/getArticleById/" + this.$route.params.id
      );
      this.artObj = data[0];
      this.value = this.artObj.article_content;
      let res = this.value.split(/[\n]/);
      res.forEach((item, index) => {
        if (item[0] == "#") {
          let obj = {
            key: index,
            value: item.slice(3),
          };
          this.titleArr.push(obj);
          // console.log(this.titleArr);
        }
      });
    },
  },
  components: {
    Author,
    Advert,
    Footer,
  },
};
</script>

<style lang="less">
@keyframes fade-in {
  0% {
    opacity: 0;
  } /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  } /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  } /*结束状态 透明度为1*/
}

.detailed {
  overflow: hidden;
  .ant-row-flex {
    margin-top: 0.3rem;
  }
}

.v-note-navigation-wrapper {
  margin-left: 3rem;
}
.v-show-content {
  background: #fff !important;
}
.detailed {
  overflow: hidden;
  .ant-row {
    margin-top: 0.5rem;
  }
  .detailed-title {
    text-align: center;
    margin: 0.5em 0;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .ant-breadcrumb {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
    background-color: #e1f0ff;
  }
  .list-icon {
    text-align: center;
    span {
      padding: 0 5px;
    }
  }
}
.ant-card-body {
  padding: 10px;
}
</style>